<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/ingot-6.css">
</head>

<body>
    <div class="home">
        <div class="header">
            <div class="warp">
                <a href=""><i class="back"></i></a>
                <h1>新书热卖榜</h1>
                <i class="menu" onclick="salt()"></i>
            </div>
            <ul class="mark">
                <li>
                    <a href="http://m.dangdang.com/">
                        <img src="http://touch.m.dangdang.com/coreimages/h-home.png" alt="首页">
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="http://search.m.dangdang.com/ddcategory.php?t=1725971285">
                        <img src="http://img60.ddimg.cn/upload_img/00459/h5/ic_search-1535169497.png" alt="分类">
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="http://z.dangdang.com/?t=1725971286">
                        <img src="http://img60.ddimg.cn/upload_img/00459/h5/ic_buy2-1537256077.png" alt="值得买">
                        <p>值得买</p>
                    </a>
                </li>
                <li>
                    <a href="http://cart.m.dangdang.com/cart.php?action=list_cart&t=1725971286">
                        <img src="http://touch.m.dangdang.com/coreimages/h-cart.png" alt="购物车">
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="http://home.m.dangdang.com/?t=1725971286">
                        <img src="http://touch.m.dangdang.com/coreimages/h-user.png" alt="我的当当">
                        <p>我的当当</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tabbar">
            <a href="http://m.dangdang.com">
                <img src="http://img60.ddimg.cn/upload_img/00459/h5/icon_03_in-1536891748.png" alt="首页">
            </a>
            <a href="http://search.m.dangdang.com/ddcategory.php?t=1726111873">
                <img src="http://img63.ddimg.cn/upload_img/00528/000/feilei-8-2.png" alt="分类">
            </a>
            <a href="http://z.dangdang.com?t=1726111873">
                <img src="http://img62.ddimg.cn/upload_img/00782/h5/ic_buy_normal-1537519625.png" alt="值得买">
            </a>
            <a href="http://cart.m.dangdang.com/cart.php?action=list_cart&amp;t=1726111873">
                <img src="http://img63.ddimg.cn/upload_img/00528/000/guowuche-8-2.png" alt="购物车">
            </a>
            <a href="http://home.m.dangdang.com/?t=1726111873">
                <img src="http://img60.ddimg.cn/upload_img/00528/000/wodedangdang---4.png" alt="我的当当">
            </a>
        </div>
        <div class="navbar">
            <s></s>
            <ul class="navtop warp">
            </ul>
        </div>
        <div class="topbar">
            <div onclick="sale()"></div>
            <ul class="navbtn">
                
            </ul>
        </div>
        <div class="picbar">
        </div>
    </div>
</body>

<script src="./js/reset.js"></script>
<script src="./js/data-6.js"></script>
<script>
    var head = document.querySelector("h1");
    var navtop = document.querySelector("ul.navtop");

    titles.forEach(function (item, index) {
        navtop.innerHTML += `<li onclick="change(${index})">${item}</li>`;
    });

    navtop.children[0].classList.add('active');

    function change(i) {
        for (var ij = 0; ij < titles.length; ij++) {
            navtop.children[ij].classList.remove('active');
        }

        navtop.children[i].classList.add('active');
        head.innerHTML = navtop.children[i].innerHTML;
    }

    var picbar = document.querySelector(".picbar");
    // for (var p = 0; p < titles.length; p++) {
    for (var q = 0; q < book1.length; q++) {
        picbar.innerHTML += `<div>
                <div class="left">
                    <p>${q + 1}</p>
                    <img src="${book1[q].pic}"></img>
                </div>
                <div class="right">
                <p>${book1[q].title}</p>   
                <span class="loop">${book1[q].author}</span>
                <span class="loop">${book1[q].aether}</span>
                <b>${book1[q].tag}</b><br>
                <i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i>
                <small>${book1[q].comment}</small>
                </div>
            </div>
        `;
        // }
    };
</script>
<script>
    var j = 0
    var mark = document.querySelector(".mark")
    var menu = document.querySelector(".menu")
    function salt() {
        j++
        if (j % 2 == 1) {
            menu.style.backgroundImage = "url(http://z.dangdang.com/static/img/menu-active.c88b7eb.png)"
            mark.style.display = "block"
        } else {
            menu.style.backgroundImage = "url(http://touch.m.dangdang.com/coreimages/menu.png)"
            mark.style.display = "none"
        }
    }

    var k = 0
    var navbtn = document.querySelector(".navbtn")
    var mind = document.querySelector(".topbar div")
    function sale() {
        k++
        if (k % 2 == 1) {
            mind.style.transform = "rotateX(180deg)";
            navbtn.style.height = "2.3rem";
            navbtn.style.overflowY = "hidden";
        } else {
            mind.style.transform = "rotateX(0deg)";
            navbtn.style.height = "10.3rem";
            navbtn.style.overflowY = "scroll";
        }
    }

    for (var l = 0; l < tag.length; l++) {
        navbtn.innerHTML += `<li onclick="sald()">${tag[l]}</li>`
    }

    function sald() {
                event.target.classList.toggle('active');
        };
</script>

</html>